<template>
  <div class="paper-add">
    <el-card>
      <el-form label-width="100px">
        <el-form-item label="年级：">
          <el-select v-model="params.level" style="width: 300px;" @change="levelChange">
            <el-option v-for="item in data" :value="item.value" :label="item.name" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科：" prop="subjectId" style="width: 300px;">
          <el-select v-model="params.subjectId" placeholder="学科">
            <el-option v-for="item in subjectlistFilter" :label="`${item.name}(${item.levelName})`" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="试卷类型：" prop="paperType" style="width: 300px;">
          <el-select v-model="params.paperType" placeholder="固定试卷">
            <el-option :value="1" label="固定试卷" />
          </el-select>
        </el-form-item>
        <el-form-item label="试卷名称:">
          <el-input v-model="params.name"></el-input>
        </el-form-item>

        <template v-for="(item, index) in params.titleItems">
          <el-form-item :label="`标题${index + 1}`">
            <el-input v-model="item.name" style="width: 50%;"></el-input>
            <el-button link type="primary" @click="addquestion(index)">添加题目</el-button>
            <el-button link type="primary">删除</el-button>

          </el-form-item>
          <el-form-item>
            <el-card>
              <p v-for="(question,index) in item.questionItems">{{index}}.{{ question.title }}</p>
            </el-card>
          </el-form-item>
        </template>

        <el-form-item label="考试时长:">
          <el-input type="number" v-model="params.suggestTime"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="Onsubmit">提交</el-button>
          <el-button>重置</el-button>
          <el-button type="success" @click="itemAdd">添加标题</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog v-model="dialogVisible" width="500" >
      <QuestionView :subject-id="params.subjectId" @send-ids="getids" :key="dialogVisible+''"></QuestionView>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import QuestionView from './components/QuestionView.vue';
import { ref } from 'vue'
import QuestionApi, { type subjectType, } from "@/api/exam/query.api";
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router=useRouter()
interface paramsType {
  level: null | number
  subjectId: null | number
  paperType: null | number
  name: string
  suggestTime: number | null
  titleItems: any[]
}
let dialogVisible = ref(false)
let params = ref<paramsType>({
  level: null,
  subjectId: null,
  paperType: null,
  name: "",
  suggestTime: null,
  titleItems: []

})
let subjectlist = ref<subjectType[]>([])
let subjectlistFilter = ref<subjectType[]>([])
function levelChange() {
  params.value.subjectId=null
  subjectlistFilter.value = subjectlist.value.filter(item => item.level == params.value.level)
}
// 获取学科列表
function getsubjectlist() {
  QuestionApi.getsubject().then(data => {
    subjectlist.value = data
    subjectlistFilter.value = data
  })
}
// 提交
function Onsubmit() {
  QuestionApi.addquestion(params.value).then(res=>{
    if (res) {
       ElMessage({
      type: "success",
      message: "添加成功"
    })
    }
    
  })
router.push("/exam/examlsit")
}
function itemAdd() {
  console.log(0);

  params.value.titleItems.push({
    name: '',
    questionItems: []
  })
}
let ids: number[] = []
function getids(s: number[]) {
  ids = s
}
// 确认
function confirm() {
  // 拿ids 获取详情 触发多个接口
  let ps: any = []
  ids.forEach(item => {
    ps.push(QuestionApi.getquestionDetaild(item))
  })
  Promise.all(ps).then(res => {
    params.value.titleItems[index].questionItems = res
  })
  dialogVisible.value = false
}
// 点记录点第几个标题点击的题目
let index = -1
function addquestion(i: number) {
  if (params.value.subjectId) {
    dialogVisible.value = true
    index = i
  } else {
    ElMessage({
      type: "error",
      message: "请选择学科"
    })
  }
}
onMounted(() => {
  getsubjectlist()
})
interface arrType {
  value: number
  name: string
}
let data = ref<arrType[]>([
  { value: 1, name: '一年级' },
  { value: 2, name: '二年级' },
  { value: 3, name: '三年级' },
  { value: 4, name: '四年级' },
  { value: 5, name: '五年级' },
  { value: 6, name: '六年级' },
  { value: 7, name: '初一' },
  { value: 8, name: '初二' },
  { value: 9, name: '初三' },
  { value: 10, name: '高一' },
  { value: 11, name: '高二' },
  { value: 12, name: '高三' },
])
</script>

<style scoped>
.paper-add {
  padding: 10px;
}
</style>